<template>
  <div class="ai-chat">
    <!-- 背景虚化层 -->
    <div
      v-if="isChatExpanded"
      class="blurred-background"
    ></div>

    <!-- 缩小的页面 -->
    <div class="iframe-container" :class="{ expanded: isChatExpanded }">
      <iframe
        ref="iframe"
        src="http://223.2.51.250:8080/ui/chat/dbb4b2f590cfbe85"
        :style="{ 'width': '100%', 'height': '100%', 'zoom': isChatExpanded ? 1 : 0.8 }"
        frameborder="0"
        allow="microphone"
      ></iframe>

      <!-- 关闭图标 -->
      <el-icon
        v-if="isChatExpanded"
        class="close-icon"
        @click="hideFullscreenChart"
        :size="20"
      >
        <Close />
      </el-icon>

      <!-- 放大图标 -->
      <el-icon
        v-else
        class="expand-icon"
        @click="toggleChat"
        :size="25"
      >
        <FullScreen />
      </el-icon>
    </div>
  </div>
</template>

<style scoped>
.ai-chat {
  position: relative;
  height: 100%;
}

/* 背景虚化层 */
.blurred-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px); /* 背景模糊效果 */
  background-color: rgba(0, 0, 0, 0.1); /* 半透明背景 */
  z-index: 999;
}

/* 缩小的页面 */
.iframe-container {
  position: relative;
  width: 97%;
  height: 50%;
  margin-left: 10px;
}

/* 放大的页面 */
.iframe-container.expanded {
  position: fixed;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.iframe-container.expanded iframe {
  border-radius: 8px;
}

.expand-icon {
  position: absolute;
  bottom: 5px;
  right: 5px;
  cursor: pointer;
  z-index: 1001;
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.expand-icon:hover {
  color: rgb(255, 0, 0); /* 鼠标悬浮时变为红色 */
}

.close-icon {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1001;
  transition: color 0.3s ease; /* 添加颜色过渡效果 */
}
.close-icon:hover {
    color: rgb(255, 0, 0); /* 鼠标悬浮时变为红色 */
}
</style>

<script>
import { defineComponent } from 'vue';
import { ElIcon, FullScreen, Close } from 'element-plus';

export default defineComponent({
  components: {
    ElIcon,
    FullScreen,
    Close
  },
  data() {
    return {
      isChatExpanded: false // 控制是否放大
    };
  },
  methods: {
    toggleChat() {
      this.isChatExpanded = true;
    },

    hideFullscreenChart() {
      this.isChatExpanded = false;
    }
  }
});
</script>